<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .banner{
        width:260px;
        margin: 100px auto;
        height:180px;
        border: 1px solid #cccbcb;
        border-radius: 15px;
    }
    .nav{
        width: 500px;
        margin: 0 auto;
    }
    .banner h3{
        font-size: 35px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-weight: 400;
        border-bottom: 1px solid #cccbcb;
        margin: 0px 3px;
        font-family: 华文隶书;
    }
    .contain{
        height: 210px;
    }
    .box{
        height:40px;
        margin:3px 20px ;
    }
    .box span{
        font-size: 14px;
        font-family: 楷体;
    }
    .box input{
        border: 0px #cccbcb solid;
        border-bottom: 1px #3188F2 solid;
        border-radius: 5px;
        outline: none;
    }
    .box button{
        width: 100px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #cccbcb;
        border-radius: 4px;
        outline:invert;
    }
</style>
<body >
<div class="nav">
    <a href="index.html">作业一</a>
    <a href="demo.html">作业二</a>
    <a href="temp.html">作业三</a>
    <a href="test.html">作业四</a>
    <a href="iphoe.html">作业五</a>

    <div class="banner">

        <h3>登录</h3>
        <div class="contain">
            <div class="box">
                <span>用户:</span><input type="text">
            </div>
            <div class="box">
                <span>密码:</span><input type="password">
            </div>
            <div class="box">
                <button>登录</button>
                <button>注册</button>
            </div>

        </div>
    </div>
</div>

</body>
</html>